<template>
  <div class="wrap">
    <div class="container">
      <UserInfo />
      <!-- 目录 -->
      <Directory v-if="isDetails"/>
      <!-- 热门文章 -->
      <HotArticle />
      <!-- 最新评论 -->
      <HotComment />

      <el-card class="img-card">
        <img
          src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6175104aec964d3f88670c283bd8b336~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
          alt=""
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import HotArticle from '@/views/Right/HotArticle'
import HotComment from '@/views/Right/HotComment'
import UserInfo from '@/views/Right/UserInfo'
import Directory from '@/views/Right/Directory'
export default {
  // name: "Right",
  components: { HotArticle, HotComment, UserInfo, Directory },
  data () {
    return {}
  },
  computed: {
    isDetails () {
      if (this.$route.path == '/news/details') {
        return true
      }
      return false
    }
  },
  created () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.container {
  margin-left: 15px;
  width: 325px;
  display:flex;
  flex-direction: column;
div{
  margin-bottom: 15px;
}
  .img-card {
    ::v-deep.el-card__body {
      padding: 0;
    }
    img {
      width: 100%;
    }
  }
}
</style>
